---
title: カラーモード
description: カラーモードをカスタマイズする方法を学ぶ。
---

:::tip
カラーモードの概要は[こちら](/docs/styling/color-mode)をご覧ください。
:::

## カスタマイズ

デフォルトでは、カラーモードは`"light"`が設定されています。もし、`"dark"`または`"system"`を使用する場合は、`config.defaultColorMode`に値を設定します。

::::steps

### テーマを生成する

[CLI](/docs/theming/cli)を使用してテーマを生成します。

:::warning
下記のコマンドを実行する前に、`@yamada-ui/cli`をインストールして`init`コマンドを実行する必要があります。詳しくは、[こちら](/docs/get-started/cli)をご覧ください。
:::

:::code-group

```bash [pnpm]
pnpm yamada-cli theme
```

```bash [npm]
npm yamada-cli theme
```

```bash [yarn]
yarn yamada-cli theme
```

```bash [bun]
bun yamada-cli theme
```

:::

### コンフィグを変更する

生成したテーマの`config.ts`を変更します。

```tsx title="theme/config.ts"
import { defineConfig } from "@yamada-ui/react"

export const config = defineConfig({
  css: { varPrefix: "ui" },
  breakpoint: { direction: "down", identifier: "@media screen" },
  defaultColorMode: "dark", // [!code highlight]
  defaultThemeScheme: "base",
  notice: { duration: 5000 },
  theme: { responsive: true },
})
```

### プロバイダーを更新する

生成したテーマを`UIProvider`に設定します。

```tsx {2,6}
import { UIProvider } from "@workspaces/ui"
import { theme, config } from "@workspace/theme"

const App = () => {
  return (
    <UIProvider theme={theme} config={config}>
      <YourApplication />
    </UIProvider>
  )
}
```

::::
